<template>

  <!-- 轮播图 -->
  <div class="index" style="width: 100%;">
    <div class="mainPic">
      <el-carousel height="auto" autoplay>
        <el-carousel-item v-for="item in 4" :key="item"
          style="height: 545px;display: flex;justify-content: center;align-items: center;border-radius: 10px;">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  

  <!-- 搜索功能 -->
  <div class="search">

        <!-- 时间选择器 -->
        <div class="demo-date-picker">
          <div class="block" style="">
            <span class="demonstration">请选择日期&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;[&ensp;共{{ timecut }}天&ensp;]</span>
            <el-date-picker v-model="dateRange" :editable="false" type="daterange" range-separator="到"
              start-placeholder="入住时间" end-placeholder="退房时间" :size="size" @change="handleDateChange" />
          </div>
        </div>

        <!-- 客房人数选择 -->
        <div class="people-picker-box">
          <el-popover placement="bottom" title="请选择入住客房的人数" :width="350" trigger="click">
            <div style="width: 350px;">
              <p>每间客房最多可入住6位客人</p>
            </div>
            <div
              style="width: 320px;margin-bottom: 10px;height: 30px; background-color: rgb(232.8, 233.4, 234.6); display: flex; align-items: center;">
              <div style="margin-left: 60px;">成人</div>
              <div style="margin-left: 140px;">儿童</div>
            </div>
            <div style="width: 350px;">
              <el-input-number v-model="adultNum" :min="0" :max="humanMax" @change="handleChange"
                style="margin-right: 20px;" />
              <el-input-number v-model="kidNum" :min="0" :max="kidMax" @change="handleChange" />
            </div>

            <template #reference>
              <el-button>
                <el-text>
                  <el-icon>
                    <User />
                  </el-icon>
                  &ensp;1&ensp;客房，{{ adultNum }}&ensp;成人，{{ kidNum }}&ensp;儿童
                </el-text>
              </el-button>
            </template>
          </el-popover>
        </div>

        <div class="search-box">
          <el-button :icon="Search">搜索</el-button>
        </div>

  </div>

  <div class="" style="height: auto; width: 100%;">
    <BaseRoomType/>
  </div>
  
  <div style="display: flex;font-size: 50px;font-weight: bold;padding-top: 20px;">
    订酒店，选睿雅
  </div>
  <div class="service-box">
    <div class="box-item" v-for="(item, index) in serviceItems" :key="index">
      <img :src="item.pic" alt="pic" />
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref,watch,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import BaseRoomType from './BaseRoomType.vue';
import api from '@/api/index.js';

const size = ref<'default' | 'large' | 'small'>('default')


const dateRange = ref([]);
const timecut = ref(0);
const imageUrl = ref('') //上传图片的url(本地预览地址)

const router = useRouter();

// 轮播图图片地址数组
// const carouselImages = ref<string[]>([]);

// 获取图片地址的方法
// const fetchCarouselImages = async () => {
//   try {
//     const res = await api.getAllRoomInPage(1, 4); // 获取前4条数据
//     const data = res.data.data.list;

//     // 提取图片地址
//     carouselImages.value = data
//       .map((item: any) => item.picture) // 提取 picture 字段
//       .filter((url: string | null) => url != null);
//     console.log("轮播图图片地址：", carouselImages.value);
//   } catch (err) {
//     console.error("获取轮播图图片失败：", err);
//   }
// };

// // 页面加载时获取图片
// onMounted(() => {
//   fetchCarouselImages();
// });

//#region 时间选择器
const handleDateChange = () => {

  if (dateRange.value === null ) {
    timecut.value = 0;
    
  } else {
    // 计算时间差（毫秒）
    const differenceInTime = dateRange.value[1] - dateRange.value[0];

    // 将时间差转换为天数
    const differenceInDays = differenceInTime / (1000 * 3600 * 24);

    // 返回天数差的绝对值
    console.log(Math.abs(differenceInDays));

    timecut.value = Math.abs(differenceInDays);
  }

  

}
//#endregion


//#region 人数选择
const adultNum = ref(0)
const kidNum = ref(0)
const humanMax = ref(6)
const kidMax = ref(6)
const MaxNum = ref(6)
const handleChange = (value: number) => {}


watch([adultNum,kidNum],([newAdultNum,newKidNum],[oldAdultNum,oldKidNum])=>{
  humanMax.value = MaxNum.value - kidNum.value
  kidMax.value = MaxNum.value - adultNum.value
})
//#endregion

//底部声明
const serviceItems = ref([
  {
    pic: '../pic/global.svg',
    title: '全世界最高级的酒店',
    description: '为您提供最好的入住体验'
  },
  {
    pic: '../pic/headphones.svg',
    title: '7*24h全天客服',
    description: '帮您解决所有问题'
  },
  {
    pic: '../pic/folder.svg',
    title: '有房保障',
    description: '让您安心入住'
  }
]);


</script>

<style scoped>

/* 轮播图 */
.mainPic{
    min-height: 525px;
    text-align: center;
    margin-bottom: 5%;
    box-shadow: 0 0 10px;
    border-radius:10px;
    float:none;
}

/* 酒店时间人数查找 */
.search{
height: 100px;
width: 100%;
padding-top: 5px;
margin: 0 auto;
margin-top: -50px;
justify-content: center; /* 项目之间的空间均匀分布 */
display: flex; /* 使用Flexbox布局 */
align-items: center;
}


/* 时间选择器 */
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    height: 61px;
    width: 370px;
    padding-right: 10px;
}
.demo-date-picker .block {
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 10px;
}

/* 人数选择 */
.people-picker-box{
    top: 40%;
    margin-top: 30px;
    padding-right: 10px;
}


.search-box{
    top: 40%;
    margin-top: 30px;
}





/* 轮播图 */
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(1) {
  background: url('/pic/pic4.jpg') no-repeat center center;
  background-size: cover;
}

.el-carousel__item:nth-child(2) {
  background: url('/pic/pic2.jpg') no-repeat center center;
  background-size: cover;
}
.el-carousel__item:nth-child(3) {
  background: url('/pic/pic3.jpg') no-repeat center center;
  background-size: cover;
}
.el-carousel__item:nth-child(4) {
  background: url('/pic/pic1.jpg') no-repeat center center;
  background-size: cover;
}


.service-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 40px;
}

.box-item {
  padding-left: 100px;
  padding-right: 100px;
  text-align: center;
  width: 50%;
}

.box-item img {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}

.box-item h3 {
  white-space: nowrap;
  font-size: 23px;
  margin: 0;
  margin-bottom: 10px;
}

.box-item p {
  font-size: 18px;
  color: #666;
  margin: 0;
}

/* 页面响应式布局 */

@media (max-width: 980px) {
  .myCenter {
    width: 100% 
  }
}



</style>